<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="title"/>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
			
		const vm = new Vue({
		    el:"#app",
			data:{
				title:"生命周期"
			},
		    beforeCreate() {
		        /*备孕*/
		        console.log("实例创建之前")
		    },
		    created() {
		        /*怀上了*/
		        // 数据请求
		        console.log("实例创建之后")
		    },
		    beforeMount() {
		        /*快生了*/
		        console.log("挂载到页面之前")
		    },
		    mounted() {
		        /*生了*/
		        // 数据请求，DOM操作，监听滚动事件...
		        console.log("挂载到页面之后")
		    },
		    beforeUpdate() {
		        /*快长大了*/
		        console.log("数据更新之前")
		    },
		    updated() {
		        /*长大了*/
		        // DOM操作，实例化的操作...
		        console.log("数据更新之后")
		    },
		    beforeDestroy() {
		        /*要挂了*/
		        // 取消数据订阅
		        console.log("实例销毁之前")
		    },
		    destroyed() {
		        /*挂了*/
		        console.log("实例销毁之后")
		    }
		})
		
		document.onclick = function(){
			vm.$destroy();
		}
		
	</script>
</html>
